$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
-// selection colors
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
\ No newline at end of file
+// accent colors
+$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));
}
%default_button {
- @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
- &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
- &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
- &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
- &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+ @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);
+ &:focus { @include button(focus, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+ &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+ &:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+ &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
}
// items in popover menus
border-radius: $base_border_radius;
padding: $base_padding * 1.5 $base_padding * 1.5;
- selection-background-color: transparentize($selected_bg_color, 0.7);
+ selection-background-color: st-transparentize(-st-accent-color, 0.7);
selected-color: $fg_color;
}
$error_fg_color: $light_1;
$error_color: $error_bg_color;
-// colors for selected or default elements
-$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
-$selected_fg_color: $light_1;
-
// link colors
-$link_color: if($variant == 'light', $blue_4, $blue_2);
-$link_visited_color: transparentize($link_color, .6);
+$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
+$link_visited_color: st-transparentize($link_color, .6);
// special cased widget definitions
$background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
// focus colors
-$focus_color: $selected_bg_color;
-$focus_border_color: transparentize($focus_color, 0.5);
+$focus_color: -st-accent-color;
+$focus_border_color: st-transparentize($focus_color, 0.5);
// High Contrast overrides
@if $contrast == 'high' {
$shadow_color: transparent;
$text_shadow_color: transparent;
// less transparent focus color
- $focus_border_color: transparentize($focus_color, 0.2);
+ $focus_border_color: st-transparentize($focus_color, 0.2);
}
// $mc: mix color, defined in High Contrast specific stylesheet
// $mf: mix factor (%), defined in High Contrast specific stylesheet
//
- @return mix($c, $mc, $mf);
+ @return st-mix($c, $mc, $mf);
}
// Function to mix the color and make the focus background
@function focus_bg_color($bg, $fc:$focus_color) {
- @return mix($fc, $bg, 5%);
+ @return st-mix($fc, $bg, 5%);
}
//
//
// mix input colors to get button background color
- $button_bg_color: mix($tc, $c, $background_mix_factor);
+ $button_bg_color: st-mix($tc, $c, $background_mix_factor);
// background color override for card elements
@if $style == 'card' { $button_bg_color: $card_bg_color;}
}
// button base state background colors
- $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
- $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
- $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
- $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
+ $hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor));
+ $active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor));
+ $checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor));
+ $insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_factor));
// button extended state background colors
- $active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
- $checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
- $checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));
+ $active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor));
+ $checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor));
+ $checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-lighten($checked_button_bg_color, $active_factor));
// override button background colours if element is always dark
@if $always_dark {
- $hover_button_bg_color: lighten($button_bg_color, $hover_factor);
- $active_button_bg_color: lighten($button_bg_color, $active_factor);
- $checked_button_bg_color: lighten($button_bg_color, $checked_factor);
- $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
+ $hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
+ $active_button_bg_color: st-lighten($button_bg_color, $active_factor);
+ $checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
+ $insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor);
// extended
- $active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
- $checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
- $checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
+ $active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
+ $checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
+ $checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
}
// background color override for buttons that use transparency
// insensitive button
@else if $type == 'insensitive' {
- $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
+ $insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5));
color: $insensitive_button_fg_color;
background-color: $insensitive_button_bg_color;
// use a different focus ring color for default style
@if $style == 'default' {
- @include focus_ring($fc:$selected_borders_color);
+ @include focus_ring($fc:$accent_borders_color);
}
// change background color if style is flat
@if $style == 'flat' {
}
&:drop {
- background-color: transparentize($selected_bg_color, .8);
- box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
+ background-color: st-transparentize(-st-accent-color, .8);
+ box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
}
}
$active_bg_color: lighten($bg_color, 22%);
$active_fg_color: lighten($fg_color, 22%);
-// selection colors
-$selected_borders_color: lighten($selected_bg_color, 30%);
+// accent colors
+$accent_borders_color: st-lighten(-st-accent-color, 30%);
//
// High Contrast specific definitions
width: $ripple_size;
height: $ripple_size;
border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
- background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
- box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
+ background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 30%);
+ box-shadow: 0 0 2px 2px st-lighten(-st-accent-color, 20%);
}
// Pointer accessibility notifications
width: 60px;
height: 60px;
-pie-border-width: 3px;
- -pie-border-color: $selected_bg_color;
- -pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
+ -pie-border-color: -st-accent-color;
+ -pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%);
}
// Screen zoom/Magnifier
.magnifier-zoom-region {
- border: 2px solid $selected_bg_color;
+ border: 2px solid -st-accent-color;
&.full-screen { border-width: 0; }
}
color: $link_color;
&:hover {
- color: lighten($link_color, 10%);
+ color: st-lighten($link_color, 10%);
}
}
&.calendar-today {
@extend %default_button;
// override colors above for when today is a weekend
- color: $selected_fg_color !important;
+ color: -st-accent-fg-color !important;
&.calendar-day-with-events {
background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
}
&:focus StBin {
// Trick due to St limitations. It needs a background to draw a box-shadow
background-color: rgba(0, 0, 0, 0.01);
- box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .65);
+ box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
}
StIcon {
}
&:checked StIcon {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
+ background-color: -st-accent-color;
+ color: -st-accent-fg-color;
border-color: transparent;
}
&:checked:hover StIcon {
- background-color: lighten($selected_bg_color, 5%);
- color: lighten($selected_fg_color, 5%);
+ background-color: st-lighten(-st-accent-color, 5%);
+ color: st-lighten(-st-accent-fg-color, 5%);
}
&:checked:active StIcon {
- background-color: darken($selected_bg_color, 7%);
- color: darken($selected_fg_color, 7%);
+ background-color: st-darken(-st-accent-color, 7%);
+ color: st-darken(-st-accent-fg-color, 7%);
}
}
border-radius: $base_border_radius * 2;
&:hover,&:focus { background-color: $hover_bg_color; }
&:active {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
+ background-color: -st-accent-color;
+ color: -st-accent-fg-color;
}
}
.candidate-box {
padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
border-radius: $base_border_radius;
- &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+ &:selected { background-color: -st-accent-color; color: -st-accent-fg-color; }
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
}
// keys that may be latched: ctrl/alt/shift
&:latched {
- border-color: lighten($selected_bg_color, 5%);
- background-color: $selected_bg_color;
+ border-color: st-lighten(-st-accent-color, 5%);
+ background-color: -st-accent-color;
}
}
// enter key is suggested-action
&.enter-key {
- @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
- &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
- &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
- &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
+ @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color);
+ &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);}
+ &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);}
+ &:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
}
.emoji-panel {
.keyboard-key:latched {
- border-color: lighten($selected_bg_color, 5%);
- background-color: $selected_bg_color;
+ border-color: st-lighten(-st-accent-color, 5%);
+ background-color: -st-accent-color;
}
}
color: darken($_gdm_fg,30%);
&:focus, &:selected {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
+ background-color: -st-accent-color;
+ color: -st-accent-fg-color;
}
}
&:logged-in {
// color border for logged-in user
.user-icon {
- border-color: $selected_bg_color;
+ border-color: -st-accent-color;
StIcon {
- background-color: transparentize($selected_bg_color, .7);
+ background-color: st-transparentize(-st-accent-color, .7);
}
}
}
StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7);
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
- &:active { background-color: transparentize($selected_bg_color,0.5); }
+ &:active { background-color: st-transparentize(-st-accent-color,0.5); }
}
}
.shell-link {
color: $link_color;
- &:hover { color: lighten($link_color, 10%); }
- &:active { color: darken($link_color, 10%); }
+ &:hover { color: st-lighten($link_color, 10%); }
+ &:active { color: st-darken($link_color, 10%); }
}
.actor-link {
border-style: solid;
&:focus {
- border-color: transparentize($selected_bg_color, 0.4);
+ border-color: st-transparentize(-st-accent-color, 0.4);
}
}
}
// Rubberband for select-area screenshots
.select-area-rubberband {
- background-color: transparentize($selected_bg_color,0.7);
- border: 1px solid $selected_bg_color;
+ background-color: st-transparentize(-st-accent-color,0.7);
+ border: 1px solid -st-accent-color;
}
// User icon
/* Tiled window previews */
.tile-preview {
- background-color: transparentize($selected_bg_color,0.5);
- border: 1px solid $selected_bg_color;
+ background-color: st-transparentize(-st-accent-color,0.5);
+ border: 1px solid -st-accent-color;
}
// Monitor number label
.osd-monitor-label {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
+ background-color: -st-accent-color;
+ color: -st-accent-fg-color;
border-radius: $modal_radius;
font-size: 3em;
font-weight: bold;
&:checked {
@extend %default_button;
- border-color: $selected_borders_color;
+ border-color: $accent_borders_color;
}
&:ltr {
background-color: transparentize($fg_color, 0.8);
&.active {
- background-color: $selected_bg_color;
- color: $selected_fg_color;
+ background-color: -st-accent-color;
+ color: -st-accent-fg-color;
}
// draw hc outline
.screenshot-ui-window-selector-window {
&:hover {
.screenshot-ui-window-selector-window-border {
- border-color: darken($selected_bg_color, 15%);
+ border-color: st-darken(-st-accent-color, 15%);
}
}
&:checked {
.screenshot-ui-window-selector-window-border {
- border-color: $selected_bg_color;
- background-color: transparentize($selected_bg_color, 0.8);
+ border-color: -st-accent-color;
+ background-color: st-transparentize(-st-accent-color, 0.8);
}
.screenshot-ui-window-selector-check {
- color: $selected_fg_color;
- background-color: $selected_bg_color;
+ color: -st-accent-fg-color;
+ background-color: -st-accent-color;
}
}
}
-barlevel-height: 4px;
-barlevel-background-color: transparentize($fg_color, 0.9);
// fill style
- -barlevel-active-background-color: $selected_bg_color;
+ -barlevel-active-background-color: -st-accent-color;
// overfill style (red in this case)
-barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width:1px;
// Window cycler highlight
.cycler-highlight {
- border: 5px solid $selected_bg_color;
+ border: 5px solid -st-accent-color;
}
}
&:checked {
- background: $selected_bg_color;
- color: $selected_fg_color;
+ background: -st-accent-color;
+ color: -st-accent-fg-color;
&:hover {
- background-color: lighten($selected_bg_color, 5%);
- color: lighten($selected_fg_color, 5%);
+ background-color: st-lighten(-st-accent-color, 5%);
+ color: st-lighten(-st-accent-fg-color, 5%);
}
.handle {
// selected indicator
.workspace-thumbnail-indicator {
- border: 3px solid $selected_bg_color;
+ border: 3px solid -st-accent-color;
border-radius: $base_border_radius;
}